import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";
export function useBaseTableDialog() {
  const getConfigItem = (name: string) => {
    for (let i = 0; i < formConfig.config.length; i++) {
      const item = formConfig.config[i];
      for (let j = 0; j < item.colConfig.length; j++) {
        const el = item.colConfig[j];
        if (el.name == name) {
          return el;
        }
      }
    }
  };
  const emitTypeList = ["testselect"] as const;
  const getDefaultFormValue = () => {
    return {
      testinput: "",
      testinput1: "",
      testselect: "",
      inputnum: 1,
      date: "",
      time: "",
      cascader: "",
      groupInput: { a: "", b: "" },
    };
  };
  const formConfig = reactive({
    emitTypeList: emitTypeList,
    formValue: getDefaultFormValue(),
    formPropSheet: {
      class: "test",
      labelWidth: "92px",
    },
    config: [
      {
        rowPropSheet: {
          gutter: 20,
        },
        colConfig: [
          {
            name: "groupInput",
            type: "custom",
            templateName: "GroupInput",
            formControlPropSheet: {},
            hide: false,
            colPropSheet: {
              span: 24,
            },
            formItemPropSheet: {
              label: "groupInput:",
              prop: "groupInput",
            },
          },
        ],
      },
      {
        rowPropSheet: {
          gutter: 20,
        },
        colConfig: [
          {
            name: "testinput",
            type: "ElInput",
            formControlPropSheet: {
              placeholder: "请输入",
            },
            hide: false,
            colPropSheet: {
              span: 12,
            },
            formItemPropSheet: {
              label: "testinput:",
              prop: "testinput",
              rules: [
                {
                  required: true,
                  message: "请输入",
                  trigger: "blur",
                },
              ],
            },
          },
          {
            name: "testselect",
            type: "ElSelect",
            formControlPropSheet: {
              placeholder: "请选择",
            },
            changeType: "testselect",
            hide: false,
            colPropSheet: {
              span: 12,
            },
            formItemPropSheet: {
              label: "testselect:",
              prop: "testselect",
              rules: [
                {
                  required: true,
                  message: "请选择",
                  trigger: "change",
                },
              ],
            },
            options: [
              { label: "test1", value: 1 },
              { label: "test2", value: 2 },
            ],
            tips: {
              content: '测试tips'
            },
          },
        ],
      },
      {
        rowPropSheet: {
          gutter: 20,
        },
        colConfig: [
          {
            name: "date",
            type: "ElDatePicker",
            formControlPropSheet: {},
            hide: false,
            colPropSheet: {
              span: 12,
            },
            formItemPropSheet: {
              label: "date:",
              prop: "date",
              rules: [
                {
                  required: true,
                  message: "请输入",
                  trigger: "blur",
                },
              ],
            },
          },
          {
            name: "time",
            type: "ElTimePicker",
            formControlPropSheet: {
              "value-format": "HH:mm:ss",
            },
            hide: false,
            colPropSheet: {
              span: 12,
            },
            formItemPropSheet: {
              label: "time:",
              prop: "time",
              rules: [
                {
                  required: true,
                  message: "请输入",
                  trigger: "blur",
                },
              ],
            },
          },
        ],
      },
      {
        rowPropSheet: {
          gutter: 20,
        },
        colConfig: [
          {
            name: "inputnum",
            type: "ElInputNumber",
            formControlPropSheet: {
              min: 1,
              max: 10,
              "controls-position": "right",
            },
            hide: false,
            colPropSheet: {
              span: 12,
            },
            formItemPropSheet: {
              label: "inputnum:",
              prop: "inputnum",
              rules: [
                {
                  required: true,
                  message: "请输入",
                  trigger: "blur",
                },
              ],
            },
          },
          {
            name: "cascader",
            type: "ElCascader",
            formControlPropSheet: {
              options: [
                {
                  value: "guide",
                  label: "Guide",
                  children: [
                    {
                      value: "disciplines",
                      label: "Disciplines",
                      children: [
                        {
                          value: "consistency",
                          label: "Consistency",
                        },
                        {
                          value: "feedback",
                          label: "Feedback",
                        },
                        {
                          value: "efficiency",
                          label: "Efficiency",
                        },
                        {
                          value: "controllability",
                          label: "Controllability",
                        },
                      ],
                    },
                    {
                      value: "navigation",
                      label: "Navigation",
                      children: [
                        {
                          value: "side nav",
                          label: "Side Navigation",
                        },
                        {
                          value: "top nav",
                          label: "Top Navigation",
                        },
                      ],
                    },
                  ],
                },
                {
                  value: "component",
                  label: "Component",
                  children: [
                    {
                      value: "basic",
                      label: "Basic",
                      children: [
                        {
                          value: "layout",
                          label: "Layout",
                        },
                        {
                          value: "color",
                          label: "Color",
                        },
                        {
                          value: "typography",
                          label: "Typography",
                        },
                        {
                          value: "icon",
                          label: "Icon",
                        },
                        {
                          value: "button",
                          label: "Button",
                        },
                      ],
                    },
                    {
                      value: "form",
                      label: "Form",
                      children: [
                        {
                          value: "radio",
                          label: "Radio",
                        },
                        {
                          value: "checkbox",
                          label: "Checkbox",
                        },
                        {
                          value: "input",
                          label: "Input",
                        },
                        {
                          value: "input-number",
                          label: "InputNumber",
                        },
                        {
                          value: "select",
                          label: "Select",
                        },
                        {
                          value: "cascader",
                          label: "Cascader",
                        },
                        {
                          value: "switch",
                          label: "Switch",
                        },
                        {
                          value: "slider",
                          label: "Slider",
                        },
                        {
                          value: "time-picker",
                          label: "TimePicker",
                        },
                        {
                          value: "date-picker",
                          label: "DatePicker",
                        },
                        {
                          value: "datetime-picker",
                          label: "DateTimePicker",
                        },
                        {
                          value: "upload",
                          label: "Upload",
                        },
                        {
                          value: "rate",
                          label: "Rate",
                        },
                        {
                          value: "form",
                          label: "Form",
                        },
                      ],
                    },
                    {
                      value: "data",
                      label: "Data",
                      children: [
                        {
                          value: "table",
                          label: "Table",
                        },
                        {
                          value: "tag",
                          label: "Tag",
                        },
                        {
                          value: "progress",
                          label: "Progress",
                        },
                        {
                          value: "tree",
                          label: "Tree",
                        },
                        {
                          value: "pagination",
                          label: "Pagination",
                        },
                        {
                          value: "badge",
                          label: "Badge",
                        },
                      ],
                    },
                    {
                      value: "notice",
                      label: "Notice",
                      children: [
                        {
                          value: "alert",
                          label: "Alert",
                        },
                        {
                          value: "loading",
                          label: "Loading",
                        },
                        {
                          value: "message",
                          label: "Message",
                        },
                        {
                          value: "message-box",
                          label: "MessageBox",
                        },
                        {
                          value: "notification",
                          label: "Notification",
                        },
                      ],
                    },
                    {
                      value: "navigation",
                      label: "Navigation",
                      children: [
                        {
                          value: "menu",
                          label: "Menu",
                        },
                        {
                          value: "tabs",
                          label: "Tabs",
                        },
                        {
                          value: "breadcrumb",
                          label: "Breadcrumb",
                        },
                        {
                          value: "dropdown",
                          label: "Dropdown",
                        },
                        {
                          value: "steps",
                          label: "Steps",
                        },
                      ],
                    },
                    {
                      value: "others",
                      label: "Others",
                      children: [
                        {
                          value: "dialog",
                          label: "Dialog",
                        },
                        {
                          value: "tooltip",
                          label: "Tooltip",
                        },
                        {
                          value: "popover",
                          label: "Popover",
                        },
                        {
                          value: "card",
                          label: "Card",
                        },
                        {
                          value: "carousel",
                          label: "Carousel",
                        },
                        {
                          value: "collapse",
                          label: "Collapse",
                        },
                      ],
                    },
                  ],
                },
                {
                  value: "resource",
                  label: "Resource",
                  children: [
                    {
                      value: "axure",
                      label: "Axure Components",
                    },
                    {
                      value: "sketch",
                      label: "Sketch Templates",
                    },
                    {
                      value: "docs",
                      label: "Design Documentation",
                    },
                  ],
                },
              ],
              props: {
                expandTrigger: "hover",
              },
            },
            hide: false,
            colPropSheet: {
              span: 12,
            },
            formItemPropSheet: {
              label: "cascader:",
              prop: "cascader",
              rules: [
                {
                  required: true,
                  message: "请输入",
                  trigger: "change",
                },
              ],
            },
          },
        ],
      },
      {
        rowPropSheet: {
          gutter: 20,
        },
        colConfig: [
          {
            name: "testinput1",
            type: "ElInput",
            formControlPropSheet: {
              placeholder: "请输入",
              // type="textarea"
              type: "textarea",
            },
            hide: false,
            colPropSheet: {
              span: 24,
            },
            formItemPropSheet: {
              label: "testinput1:",
              prop: "testinput1",
              rules: [
                {
                  required: true,
                  message: "请输入",
                  trigger: "blur",
                },
              ],
            },
          },
        ],
      },
    ],
  });
  const changeListeners = {
    testselect(val: any) {
      console.log("testselect", val);
      const testinput1Item = getConfigItem("testinput1");
      if (testinput1Item) {
        if (val == 1) {
          testinput1Item.hide = true;
        } else {
          testinput1Item.hide = false;
        }
      }
    },
  };
  const changeItemHandel = (data: {
    val: any;
    emitType: typeof emitTypeList[number];
  }) => {
    const val = data.val;
    const emitType = data.emitType;
    changeListeners[emitType](val);
  };
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log("submit!", formConfig.formValue);
      } else {
        console.log("error submit!", fields);
      }
    });
  };
  return {
    getDefaultFormValue,
    formConfig,
    changeListeners,
    changeItemHandel,
    submitForm,
  };
}
